<template>
    <div>
      <!--头部-->
      <div class="xdetailshead">
        <div class="xback">
          <div class="xbackl">
            <a href="javascript:;" @click="click"><i class="iconfont icon-icon"></i></a>
          </div>
          <div class="xbackr">
            <a href="javascript:;"><i class="iconfont icon-message"></i></a>
            <a href="javascript:;"><i class="iconfont icon-fenxiang"></i></a>
            <a href="javascript:;" class="xlast"><i class="iconfont icon-shoucang"></i></a>
          </div>
        </div>
      </div>
      <!--中间-->
      <div class="xphoto" style="min-height: 3.7rem">
        <div class="xphotol"><img :src="item.img1"></div>
        <div class="xshowcr">
          <div class="xrt">
            <img :src="item.img2">
          </div>
          <div class="xrb">
            <div class="xpaizi">
              <p>{{item.txt1}}</p>
              <p>{{item.txt2}}</p>
            </div>
            <p class="xprice">￥{{item.price}}</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import GoodsApi from "../../apis/bshopapis";
    export default {
      created:function(){
        this.initdetails()
      },
      methods:{
        initdetails:function(){
          var {id}=this.$route.query;
          GoodsApi.getDetailsList((data)=>{
            this.item=data[id];
          })
        },
        click:function () {
          window.history.back();
        }
      },
      data(){
        return{
          item:[]
        }
      }
    }
</script>

<style lang="scss">
  html,body,div,p,form,ul,li,ol,dl,dt,dd,table,tr,td,th,hr,h1,h2,h3,h4,h5,h6,img,input{
    margin:0;
    padding:0;
  }
  html{
    font-size: 100px;
  }
  html,body{
    height: 100%;
  }
  body{
    font-family:Arial,Helvetica,"微软雅黑";
    background:#f7f7f7;
    box-sizing: border-box;
    height: 100%;
  }
  a{
    text-decoration:none;
  }
  ul,li{
    list-style:none;
  }
  img {
    border: none;
    display: block;
  }
  //头部
  .xdetailshead{
    height: .5rem;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 111;
  }
  .xback{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    line-height: 0.5rem;
  }
  .xback i{
    font-size: 18px;
    color: white;
    display: table-cell;
  }
  .xbackl{
    width: 60%;
    height: 100%;
    margin-right: 0.2rem;
  }
  .xbackr{
    width: 40%;
    height: 100%;
    display: flex;
  }
  .xbackr a{
    display: inline-block;
    margin-right: 0.4rem;
    line-height: 0.3rem;
  }
  .xback i{
    font-weight: 600;
    display: block;
    color: #f7f7f7;
  }
  .xbackr .xlast i{
    color:#f7f7f7;
  }
  //图片
  .xphoto{
    display: flex;
    width: 100%;
    background: white;
  }
  .xphotol{
    width: 60%;
    height: 3.7rem;
  }
  .xphotol img{
    width: 94%;
    height: 100%;
  }
  .xshowcr{
    width: 39%;
    margin-left: 0.1rem;
  }
  .xrt{
    width: 1.2rem;
    height: 2rem;
    margin-top: 0.3rem;
  }
  .xrt img{
    width: 100%;
    height: 100%;
  }

  .xshowc .xhide p{
    font-size: 16px;
  }
  .xwor{
    font-size: 14px;
  }
  .xrb{
    line-height: 0.3rem;
    font-size: 16px;
    //margin-left: 0.39rem;
    color: #191919;
    font-weight: 600;
  }
  .xpaizi{
    border-bottom: 1px solid #1B1B1B;
    width: 1.3rem;
    p{
      text-align: center;
    }
  }
  .xrb .xprice{
    color: #a82034;
    text-align: center;
  }
  .xshowb{
    font-size: 18px;
    color: #585858;
    margin: 0.17rem 0.1rem;
  }
</style>
